'use client';

import { useSyncStatus } from '@/hooks/useSyncStatus';
import { Card, CardContent, CardHeader, CardTitle } from '@/components/ui/card';
import { Activity, CheckCircle, AlertTriangle, XCircle, Clock, TrendingUp } from 'lucide-react';
import Link from 'next/link';
import { useTranslation } from 'react-i18next';

export const SyncStatusOverview = () => {
  const { t } = useTranslation('blockchain');
  const { syncStatus, syncProgress, healthStatus, loading, error } = useSyncStatus();

  const getStatusIcon = () => {
    switch (healthStatus) {
      case 'healthy': return <CheckCircle className="w-5 h-5 text-green-600" />;
      case 'warning': return <AlertTriangle className="w-5 h-5 text-yellow-600" />;
      case 'error': return <XCircle className="w-5 h-5 text-red-600" />;
      default: return <Clock className="w-5 h-5 text-gray-600" />;
    }
  };

  const getStatusText = () => {
    switch (healthStatus) {
      case 'healthy': return t('syncStatus.status.healthy');
      case 'warning': return t('syncStatus.status.warning');
      case 'error': return t('syncStatus.status.error');
      default: return t('syncStatus.status.unknown');
    }
  };

  const getStatusColor = () => {
    switch (healthStatus) {
      case 'healthy': return 'text-green-600';
      case 'warning': return 'text-yellow-600';
      case 'error': return 'text-red-600';
      default: return 'text-gray-600';
    }
  };

  if (loading) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="w-5 h-5" />
            {t('syncStatus.title')}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="animate-pulse space-y-2">
            <div className="h-4 bg-gray-200 rounded w-3/4"></div>
            <div className="h-4 bg-gray-200 rounded w-1/2"></div>
          </div>
        </CardContent>
      </Card>
    );
  }

  if (error) {
    return (
      <Card>
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="w-5 h-5" />
            {t('syncStatus.title')}
          </CardTitle>
        </CardHeader>
        <CardContent>
          <div className="flex items-center gap-2 text-red-600">
            <XCircle className="w-4 h-4" />
            <span className="text-sm">{t('syncStatus.connectionFailed')}</span>
          </div>
        </CardContent>
      </Card>
    );
  }

  return (
    <Link href="/blockchain">
      <Card className="cursor-pointer hover:shadow-md transition-shadow">
        <CardHeader>
          <CardTitle className="flex items-center gap-2">
            <Activity className="w-5 h-5" />
            {t('syncStatus.title')}
          </CardTitle>
        </CardHeader>
        <CardContent className="space-y-4">
          {/* 整體狀態 */}
          <div className="flex items-center justify-between">
            <div className="flex items-center gap-2">
              {getStatusIcon()}
              <span className={`font-medium ${getStatusColor()}`}>
                {getStatusText()}
              </span>
            </div>
            <div className="text-sm text-gray-600">
              {syncStatus?.blockchain?.connected ? t('syncStatus.connected') : t('syncStatus.notConnected')}
            </div>
          </div>

          {/* 區塊資訊 */}
          {syncStatus?.blockchain?.latest_block && (
            <div className="text-sm text-gray-600">
              {t('syncStatus.latestBlock')}: #{syncStatus.blockchain.latest_block.toLocaleString()}
            </div>
          )}

          {/* 同步進度 */}
          {syncProgress && (
            <div className="space-y-2">
              <div className="flex items-center justify-between text-sm">
                <span>{t('syncStatus.eventSyncProgress')}</span>
                <span className="font-medium">{syncProgress.percentage}%</span>
              </div>
              <div className="w-full bg-gray-200 rounded-full h-2">
                <div
                  className={`h-2 rounded-full transition-all duration-300 ${
                    syncProgress.percentage >= 95 ? 'bg-green-500' :
                    syncProgress.percentage >= 80 ? 'bg-yellow-500' : 'bg-red-500'
                  }`}
                  style={{ width: `${Math.min(syncProgress.percentage, 100)}%` }}
                />
              </div>
              <div className="grid grid-cols-3 gap-2 text-xs text-gray-600">
                <div className="text-center">
                  <div className="font-medium text-green-600">{syncProgress.processed.toLocaleString()}</div>
                  <div>{t('syncStatus.processed')}</div>
                </div>
                <div className="text-center">
                  <div className="font-medium text-yellow-600">{syncProgress.pending.toLocaleString()}</div>
                  <div>{t('syncStatus.pending')}</div>
                </div>
                <div className="text-center">
                  <div className="font-medium text-red-600">{syncProgress.failed.toLocaleString()}</div>
                  <div>{t('syncStatus.failed')}</div>
                </div>
              </div>
            </div>
          )}

          {/* 背景任務狀態 */}
          <div className="flex items-center gap-2 text-sm">
            <div className={`w-2 h-2 rounded-full ${
              syncStatus?.background_tasks?.is_running ? 'bg-green-500' : 'bg-red-500'
            }`} />
            <span>
              {syncStatus?.background_tasks?.task_count || 0} {t('syncStatus.backgroundTasks')}
              {syncStatus?.background_tasks?.is_running ? t('syncStatus.running') : t('syncStatus.stopped')}
            </span>
          </div>

          {/* 查看詳情提示 */}
          <div className="text-xs text-blue-600 flex items-center gap-1">
            <TrendingUp className="w-3 h-3" />
            {t('syncStatus.viewDetails')}
          </div>
        </CardContent>
      </Card>
    </Link>
  );
};